import React, { Component } from 'react';

import BreadcrumbCustom from "../../components/BreadCrumb";

import SelectDaughter from './SelectDaughter'
import SelectSon from './SelectSon'

class Select extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectOption: '',
    }
  }

  getInitialState() {
    return {
      selectOptionDaughter: '',
      selectOptionGrand: '', 
    }
  }

  // state = {
  //   selectOption: '',
  // }

  
  selectParent = e => {
    console.log(e.target.value)
    this.setState({
      selectOption: e.target.value
    })
  }
  onSelectParent = e => {
    console.log(e)
    this.setState({
      selectOption: e
    })
  }

  toParent = e => {
    console.log(e)
    this.setState({selectOptionDaughter: e})
  }
  toGrand = e => {
    console.log(e)
    this.setState({
      selectOptionGrand: e
    })
  }

  brotherToSister = e => {
    // console.log(e)
    this.setState({
      selectOption: e
    })
  }

  render() {

    const ownOptions = [
      {i: 1, val: 'value1'},
      {i: 2, val: 'value2'},
      {i: 3, val: 'value3'},
    ]

    return (
      <div>
        <BreadcrumbCustom paths={['index', 'nav1', 'select' ]}/>
        <div className="select-parent">
          <select onChange={this.selectParent} value={this.state.selectOption}>
            {
              ownOptions.map( (v,i) => 
                <option value={v.val} key={v.i}>{v.val}</option>
              )
            }
          </select>    
          <div>
            <p>res: {this.state.selectOption}</p>
            <p>toParent - res：{this.state.selectOptionDaughter}</p>
            <p>toGrandParent - res: {this.state.selectOptionGrand}</p>
          </div>     
        </div>

        <SelectSon 
          toSon={this.state.selectOption} 
          daughterToSon={this.state.selectOption} 
          brotherToSister={ (e) => {this.brotherToSister(e)} }
          />
        <SelectDaughter name="selectOptionDaughter" 
          toParent={this.toParent.bind(this)} 
          onSelectParent={ (e) => {this.onSelectParent(e)} } 
          toGrand={this.toGrand.bind(this)} 
          sonToDaughter={this.state.selectOption}
          />
          {/* */}
      </div>
    )
  }
}

export default Select;